<template>
  <div class="container">
    <div class="tip" v-if="page >= total && tipFlag">没有更多数据了呢~</div>
    <div class="loading-box" v-if="loadingFlag && page <= total">
      <div class="loading-box-text">
        <div class="loading"></div>
        <div class="text">正在加载中...</div>
      </div>
    </div>
    <div style="height: 50px"></div>
  </div>
</template>
<script setup>
import { ref, toRefs } from "vue";
const props = defineProps({
  page: Number, //接受页数
  total: Number, //接收总页数
  loadingFlag: Boolean, //是否正在加载数据
  tipFlag: Boolean, //是否显示 "没有更多数据的提示"
});
const { pag, total, loadingFlag, tipFlag } = toRefs(props);
</script>
<style lang="scss">
.container {
  padding: 30px;
  .tip {
    color: #858a99;
    font-size: 24px;
    text-align: center;
    margin: 5px;
  }

  .loading-box {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 6px;

    .loading-box-text {
      display: flex;
      align-items: center;
      color: #858a99;

      .text {
        font-size: 18px;
        margin-left: 8px;
      }

      .loading {
        width: 14px;
        height: 14px;
        border: 2px solid #858a99;
        border-top-color: transparent;
        border-radius: 100%;
        text-align: center;
        animation: circle infinite 0.75s linear;
      }

      // 转转转动画
      @keyframes circle {
        0% {
          transform: rotate(0);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}
</style>
